<template>
    <el-row class="pageWrapper">
        <el-col :span="10" class="centerStyle">
            <el-tree
                style="width: 100"
                default-expand-all
                :data="supplierTree"
                :props="defaultProps"
            >
                <template #default="{ node, data }">
                    <span
                        :class="{ activeNode: node.id == leftNodeSelected }"
                        @click="selectLeft(node, data)"
                        class="custom-tree-node"
                    >
                        <span>{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </el-col>
        <el-col :span="3" class="centerStyle">
            <el-button @click="handleBind">确认关联</el-button>
        </el-col>
        <el-col :span="10" class="centerStyle verticalFlex">
            <div style="marginbottom: 20px">
                <el-select
                    v-model="currentProvider"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择供货商"
                    :remote-method="getOptions"
                    :loading="loading"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <el-tree style="width: 100" :data="providerTree" :props="defaultProps">
                <template #default="{ node, data }">
                    <span
                        :class="{ activeNode: rightNodeSelected.has(node.id) }"
                        @click="selectRight(node, data)"
                        class="custom-tree-node"
                    >
                        <span>{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup name="matchBrand">
import {
    categoryListTree,
    categoryRelation
} from '@/servers/goods/api/supplyChaingonghuoshanggongyinglianshujuguanlian'
import { listTree } from '@/servers/goods/api/supplyChainshangpinfenlei'
import { listPage } from '@/servers/user/api/supplyChaingonghuoshangguanli'
import { ElMessage } from 'element-plus'

const defaultProps = {
    children: 'children',
    label: 'name'
}

const handleBind = async () => {
    if (!currentProvider.value) {
        ElMessage.warning('请选择供货商')
        return
    }
    if (!leftSelectedData.value) {
        ElMessage.warning('请选平台分类')
        return
    }

    if (rightSelectedData.value.size == 0) {
        ElMessage.warning('请选平台分类')
        return
    }

    await categoryRelation({
        cateId: leftSelectedData.value,
        supplierId: currentProvider.value,
        cateIds: Array.from(rightSelectedData.value) as number[]
    })
    ElMessage.success('关联成功')
    leftSelectedData.value = undefined
    leftNodeSelected.value = undefined
    rightNodeSelected.value.clear()
    rightSelectedData.value.clear()
}

// 筛选供应商
const loading = ref(false)
const options = ref<any>([])
const currentProvider = ref()
const getOptions = (query: string) => {
    loading.value = true
    listPage({ page: '1', limit: '40', name: query }).then(({ items }) => {
        options.value = items.map((i: any) => {
            return { label: i.name, value: i.id }
        })
        loading.value = false
    })
}

// 左树选择逻辑
const leftNodeSelected = ref()
const leftSelectedData = ref()

const selectLeft = (node: any, data: any) => {
    if (!node.isLeaf) return
    if (node.id == leftNodeSelected.value) {
        leftNodeSelected.value = undefined
        leftSelectedData.value = undefined
        return
    }
    leftNodeSelected.value = node.id
    leftSelectedData.value = data.id
}

//右树选择逻辑
const rightNodeSelected = ref(new Set())
const rightSelectedData = ref(new Set())
const selectRight = (node: any, data: any) => {
    if (!node.isLeaf) return
    if (rightNodeSelected.value.has(node.id)) {
        rightNodeSelected.value.delete(node.id)
        rightSelectedData.value.delete(data.id)
        return
    }
    rightNodeSelected.value.add(node.id)
    rightSelectedData.value.add(data.id)
}

// 供应链平台分类树
const supplierTree = ref()
const getSupplierCate = async () => {
    const res = await listTree({})
    supplierTree.value = res
}
getSupplierCate()

// 供货商分类树
const providerTree = ref()
const getProviderCate = async (supplierId: any) => {
    const res = await categoryListTree({
        supplierId
    })
    providerTree.value = res
}

// 根据供货商信息获取供应商分类树
watch(
    currentProvider,
    (val) => {
        rightNodeSelected.value.clear()
        rightSelectedData.value.clear()
        getProviderCate(val)
    },
    {
        immediate: true
    }
)
</script>
<style scoped lang="scss">
.pageWrapper {
    padding: 40px;
    background: #fff;
    min-height: 60vh;
    ::v-deep .el-tree-node__content {
        height: 24x;
    }
    .centerStyle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .verticalFlex {
        flex-direction: column;
        gap: 20px;
    }

    .activeNode {
        color: #fff;
        background: rgba(59 130 246 / 0.5);
    }
}
.custom-tree-node {
    padding: 0 20px;
    border-radius: 4px;
}
</style>
